<!-- 
	name:商品详情里面的优惠卷
 
 -->
<template>
	<view class="pref-box">
		<view class="pref-top">
			<view class="left">
				<text class="label">卷</text>
				<text class="pref-name">满100减20</text>
				<image class="receive-img" src="~/static/ylq.png" mode="aspectFit"></image>
			</view>
			<view class="right">
				<text class="symbol">
					￥
				</text>
				<text class="symbol-price">
					20
				</text>
			</view>
		</view>
		<view class="pref-time">
			<view class="time-text">
				有效时间:2020-10-27  2020-10-31
			</view>
			<view class="time-right">
				满100可用
			</view>
		</view>
		<view class="pref-bottom">
			<view class="bottom-text">
				1.仅在支付时使用
			</view>
			<view class="bottom-text">
				2.仅在支付时使用
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		mname:"pref"
	}
</script>

<style scoped lang="scss">
	.pref-box{
		width: 100%;
		padding: 20rpx 0 0 0;
		.pref-top{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left{
				flex-grow: 1;
				.label{
					width: 40rpx;
					height: 40rpx;
					font-size: 20rpx;
					text-align: center;
					line-height: 40rpx;
					display: inline-block;
					border-radius: 8rpx;
					color: #FFFFFF;
					font-weight: bold;
					background-color: #F43530;
				}
				.pref-name{
					padding: 0 10rpx;
					color: #333333;
					font-size: 24rpx;
					font-weight: bold;
				}
				.receive-img{
					width: 60rpx;
					height: 40rpx;
					float: right;
				}
			}
			.right{
				padding-left: 20rpx;
				.symbol{
					font-size: 32rpx;
					color: #333333;
				}
				.symbol-price{
					font-size: 32rpx;
					color: #333333;
				}
			}
			
		}
		.pref-time{
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #777777;
			font-size: 24rpx;
			padding: 20rpx 0;
			border-bottom: 1px solid #EEEEEE;
		}
		.pref-bottom{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			color: #777777;
			font-size: 24rpx;
			padding-top: 20rpx;
			.bottom-text{
				padding: 0 20rpx 20rpx 0;
			}
		}
	}
</style>
